<template>
<div>
    <nut-swiper
        direction="horizontal"
        :loop="true"
        :canDragging="false"
        :paginationVisible="true"
        class="myswiper"
        v-if="!LoadImg">
        <div class="nut-swiper-slide gray"><img src="" class="myimgshow"></div>
        <div class="nut-swiper-slide gray"><img src="" class="myimgshow"></div>
        <div class="nut-swiper-slide gray"><img src="" class="myimgshow"></div>
        <div class="nut-swiper-slide gray"><img src="" class="myimgshow"></div>
        <div class="nut-swiper-slide gray"><img src="" class="myimgshow"></div>
    </nut-swiper>
    <nut-swiper
        direction="horizontal"
        :loop="true"
        :canDragging="false"
        :paginationVisible="true"
        ref="demo3"
        class="myswiper"
        v-if="LoadImg">
        <div class="nut-swiper-slide gray"><img :src="imglist[0]" class="myimgshow"></div>
        <div class="nut-swiper-slide gray"><img :src="imglist[1]" class="myimgshow"></div>
        <div class="nut-swiper-slide gray"><img :src="imglist[2]" class="myimgshow"></div>
        <div class="nut-swiper-slide gray"><img :src="imglist[3]" class="myimgshow"></div>
        <div class="nut-swiper-slide gray"><img :src="imglist[4]" class="myimgshow"></div>
    </nut-swiper>
</div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue';
import swiper from '@nutui/nutui/dist/packages/swiper/swiper.js';  // 加载构建后的JS
import '@nutui/nutui/dist/packages/swiper/swiper.css';  //加载构建后的CSS
swiper.install(Vue);
export default {
    name:'PxPDImgShow',
	data(){
		return{
            axiosData:'',
			imglist:[],
			BigpictureShow:2,
			axiosIDdate:100000424,
            LoadImg:0,
		}
	},
	mounted(){
		if(sessionStorage.getItem('axiosIDdate') !=null){  //如果sessionStorage里的数据存在时
			if(this.$route.params.id != null) {   //如果路由有传来数据(到达订单详情页面),此时是没有关闭已经存在的的订单详情页面而进行的路由跳转
				if(this.$route.params.id != sessionStorage.getItem('axiosIDdate')){
				this.axiosIDdate=this.$route.params.id
				sessionStorage.setItem('axiosIDdate',JSON.stringify(this.axiosIDdate))
				}else{
					this.axiosIDdate=JSON.parse(sessionStorage.getItem('axiosIDdate'))
				}
			}
			else{
				//如果路由没有传数据(路由没有跳转)      此时解释为刷新页面
				this.axiosIDdate=JSON.parse(sessionStorage.getItem('axiosIDdate'))
			}
		}else{	    //如果sessionStorage里没有数据(即路由有跳转)    此时解释为初次进入订单详情界面
			this.axiosIDdate=this.$route.params.id
			sessionStorage.setItem('axiosIDdate',JSON.stringify(this.axiosIDdate))
		}
		this.$addr.get(`products/${this.axiosIDdate}/details`).then(
            response=>{     //assets\portal\14LenovoYOGA710 _silvery
                console.log('请求获取商品详情成功了',response)
                this.axiosData=response.data.data
                this.LoadImg=1
                for( let i=0; i<5; i++){
					switch (i) {
                case 0:this.imglist[i]=require(`../../../assets/${response.data.data.image.slice(13)}1_big.jpg`)
                    break;
                case 1:this.imglist[i]=require(`../../../assets/${response.data.data.image.slice(13)}2_big.jpg`)
                    break;
                case 2:this.imglist[i]=require(`../../../assets/${response.data.data.image.slice(13)}3_big.jpg`)
                    break;
                case 3:this.imglist[i]=require(`../../../assets/${response.data.data.image.slice(13)}4_big.jpg`)
                    break;
                case 4:this.imglist[i]=require(`../../../assets/${response.data.data.image.slice(13)}5_big.jpg`)
                    break;
                            default:
                                break;
                        }
                    }
            },
            error=>{
                console.log('请求获取商品详情失败了',error.message)
            }
        )
        setTimeout(() => {
            this.$bus.$emit('LefttoRight',this.axiosData)
        }, 400);
		console.log(this.axiosIDdate,'###%%');
    },
	beforeDestroy(){
		this.$bus.$off('axiosIDdate')
	},
}
</script>

<style scoped>
.myswiper{
    height: 300px;
}
.myimgshow{
    width: 100%;
    height: 100%;
}
</style>